// 上面概览区域 
<template>
  <div class="overview">
    <div class="overviewLeft">
      <Magnifier :url="miniBanners" :scale="2" />
      <div class="share">
        <span class="el-icon-star-on" @click="collectionGoods">收藏商品</span>
      </div>
    </div>
    <div class="overviewCenter">
      <h2>{{ info.title }}</h2>
      <p class="desc" v-if="info.desc">描述：{{ info.desc }}</p>
      <div class="price">
        <p>
          <i>促销价：</i>
          <span>￥{{ info.selling_price }}</span>
        </p>
        <p>
          <i>市场价：</i>
          <s>￥{{ info.market_price }}</s>
        </p>
        <p>
          <i>产品状态：</i>
          <bdi>{{ info.norm_name }}</bdi>
        </p>
      </div>
      <div class="deliveryIntroduction">
        <p class="goodsCode">
          <i>商品型号：</i>
          <bdi>{{ info.specs }}</bdi>
        </p>
        <p>
          <i>库 存：</i>
          <bdi>{{ info.goods_stock }} {{info.goods_unit}}</bdi>
        </p>
        <p>
          <i>货期：</i>
          <bdi>{{ info.delivery_time }}个工作日</bdi>
        </p>
        <p>
          <i>最小订货量：</i>
          <bdi>{{info.min_order}} {{info.goods_unit}}</bdi>
        </p>
      </div>
      <div class="Counter">
        <el-input-number size="mini" v-model="num" :min="info.min_order" :max="info.goods_stock"></el-input-number>
      </div>
      <div class="buttonz">
        <el-button size="small" @click="addCart" :loading="cartLoading">
          <span class="el-icon-sold-out"></span> 加入购物车
        </el-button>
      </div>
      <div class="payPaymentMethod">
        <span>支付方式：</span>
        <ul>
          <!-- <li>
            <img src="@/assets/paymenticon/zz.jpg">
            <i>支付宝</i>
          </li>
          <li>
            <img src="@/assets/paymenticon/ww.jpg">
            <i>微信</i>
          </li>-->
          <li>
            <img src="@/assets/paymenticon/xx.jpg" style="width: 21px" />
            <i>线下转账</i>
          </li>
          <li>
            <img src="@/assets/paymenticon/yl.png" style="width: 25px" />
            <i>银联支付</i>
          </li>
        </ul>
      </div>
    </div>

    <div class="overviewRight">
      <h3>
        <span>{{ brand.title }}</span>
      </h3>
      <div>
        <img :src="brand.logo" alt />
        <p>{{ brand.desc }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import minibanner from "../../../assets/images/miniBanner.png"; // 图片
import Magnifier from "./Magnifier";
export default {
  name: "overview",
  props: {
    brand: {
      type: Object
    },
    info: {
      type: Object
    },
    miniBanners: {
      type: Array
    }
  },
  components: {
    Magnifier
  },

  data() {
    return {
      testBanner: [
        "https://www.misumi.com.cn/linked/material/mech/MSM1/PHOTO/10302009210.jpg",
        "https://misumi.scene7.com/is/image/misumi/221005102014_20151112_m_01_99999_cn?$log_reco$",
        "https://www.misumi.com.cn/linked/material/mech/NSK1/PHOTO/221006491511.jpg"
      ],
      cartLoading: false,
      minibanner,
      centerDialogVisible: false, // el-dialog 的显示与隐藏
      num: null, // 计数器
      swiperOptionTop: {
        spaceBetween: 25,
        observer: true,
        observeParents: true
      },
      swiperOptionThumbs: {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true
      },
      configs: {
        width: 500,
        height: 500,
        maskWidth: 102,
        maskHeight: 102,
        maskColor: "red",
        maskOpacity: 0.2
      }
    };
  },
 
  watch:{
    info(newname, oldvalue){
      console.log(newname, oldvalue,23131)
      this.num = newname.min_order
      console.log(this.num)
    }
  },

  methods: {
    enlarge(url) {
      alert(url);
    },
    // 分享
    share() {
      console.log("点击了分享...");
    },
    // 失效说明触发
    showInvalid() {
      this.$alert(
        <p style="text-indent:2em">
          这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容这是一段内容
        </p>,
        "出货及送达失效说明",
        {
          confirmButtonText: "确定"
          // callback: action => {
          //   this.$message({
          //     type: 'info',
          //     message: `action: ${action}`
          //   });
          // }
        }
      );
    },

    // 收藏商品
    async collectionGoods() {
      if (this.$store.state.token) {
        let user_id = this.$store.state.UserInfor.user_id;
        let product_id = this.info.id;
        console.log(user_id);
        let res = await this.$http({
          method: "post",
          url: "/api/index/web/addCollection",
          data: {
            user_id,
            product_id
          }
        });
        console.log(res);
        if (res.data.State.Code == 200) {
          this.$notify({
            title: "商品成功加入收藏...",
            type: "success"
          });
        }
        // 判断token是否存在
      } else {
        this.$router.push("/login");
      }
    },

    // 添加购物车
    async addCart() {
      this.cartLoading = true;
      if (this.info.goods_stock) {
        let user_id = this.$store.state.UserInfor.user_id,
          num = this.num,
          product_id = this.$store.state.id, // 商品id
          goods_spec = this.info.spec;
        // 信息更新

        console.log(user_id, product_id, num, goods_spec);
        if (this.$store.state.token) {
          // 判断token是否存在
          this.$http({
            method: "post",
            url: `/api/index/web/addToCart`,
            headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
            data: {
              user_id,
              num,
              product_id,
              goods_spec
            }
          })
            .then(res => {
              console.log(res)
              if (res.data.State.Code === "2021") {
                this.$message({
                  message: "请在我的孚地关联姓名...请先完善个人信息",
                  type: "error"
                });
                 this.$router.push("/myOrder/MyCenter");
              } else if (res.data.State.Code === "2022") {
                this.$message({
                  message: "未关联手机号... 请先完善个人信息",
                  type: "error"
                });
                 this.$router.push("/myOrder/MyCenter");
              } else if (res.data.State.Code === "2023") {
                this.$message({
                  message: "请在我的孚地关联公司...请先完善个人信息",
                  type: "error"
                });
                 this.$router.push("/myOrder/MyCenter");
              } else if (res.data.State.Code === "2009") {
                this.$message({
                  message: "用户未绑定邮箱...请先完善个人信息",
                  type: "error"
                });
                 this.$router.push("/myOrder/MyCenter");
              } else if (res.data.State.Code === "2024") {
                this.$message({
                  message: "请在我的孚地关联开户行...请先完善个人信息",
                  type: "error"
                });
                 this.$router.push("/myOrder/MyCenter");
              } else if (res.data.State.Code === "2025") {
                this.$message({
                  message: "请在我的孚地关联银行账号...请先完善个人信息",
                  type: "error"
                });
                 this.$router.push("/myOrder/MyCenter");
              } else if (res.data.State.Code === "2026") {
                this.$message({
                  message: "请在我的孚地关联税号...请先完善个人信息",
                  type: "error"
                });
                 this.$router.push("/myOrder/MyCenter");
              } else {
                this.getCartNum();
                let data = res.data;
                // this.centerDialogVisible = true
                this.$message({
                  message: "成功添加到购物车...",
                  type: "success"
                });
              }
              this.cartLoading = false;
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          this.$router.push("/login");
        }
      } else {
        this.cartLoading = false;
        this.$notify.error({
          title: "该商品暂时没有库存 请选择其他商品..."
        });
      }
      // let param ={}
    },

    // 获取购物车数量
    async getCartNum() {
      let user_id = this.$store.state.UserInfor.user_id;
      let res = this.$http({
        method: "post",
        url: "/api/index/index/cartNum",
        data: {
          user_id
        }
      });
      res
        .then(res => {
          this.cartLoading = false;
          if (res.data.State.Code == 200) {
            this.$store.commit("shopping_num", res.data.data);
            this.$store.commit("flag", true);
            setTimeout(() => {
              this.$store.commit("flag", false);
            }, 1000);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 移步到购物车
    jumpShoppingCart() {
      this.centerDialogVisible = false;
      this.$router.push("/ShoppingCart");
    },
    // swiper 初始化
    swiperInit() {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.swiper;
        const swiperThumbs = this.$refs.swiperThumbs.swiper;
        swiperTop.controller.control = swiperThumbs;
        swiperThumbs.controller.control = swiperTop;
      });
    }
  },

  // 双向控制过程中使用ref 但是当mounted的钩子执行时 ref并未挂载上 故用updated钩子函数来解决bug
  updated() {
    // this.swiperInit()
  }
};
</script>

<style lang="scss" scoped>
.overview {
  width: 100%;
  min-height: 552px;
  border-top: 1px #dddddd solid;
  border-bottom: 1px #dddddd solid;
  padding-top: 26px;
  display: flex;
  flex-direction: row;
  .overviewLeft {
    box-sizing: border-box;
    width: 280px;
    padding-right: 10px;
    position: relative;
    .share {
      color: #868686;
      font-size: 12px;
      padding-left: 20px;
      padding-top: 60px;
      span {
        display: inline-block;
        padding: 4px 10px;
        margin: 0 25px;
        border-radius: 5px;
        cursor: pointer;
        &:hover {
          color: #fff;
          background-color: #0a83e7;
        }
      }
    }
  }
  .overviewCenter {
    width: 678px;
    box-sizing: border-box;
    padding-left: 10px;
    // background: #29e910;
    .desc {
      // text-indent: 2em;
      padding-right: 40px;
      font-size: 12px;
      text-align: justify;
      color: #717171;
    }
    .price {
      width: 628px;
      height: 116px;
      background: #f0f0f0;
      margin-top: 16px;
      p {
        i {
          padding-left: 34px;
          line-height: 32px;
          margin-right: 10px;
        }
        span {
          color: red;
        }
      }
      p:first-child {
        padding-top: 8px;
        span {
          font-size: 24px;
          font-weight: 700;
        }
      }
      p:last-child {
        span {
          border: 1px solid red;
        }
      }
    }
    .deliveryIntroduction {
      line-height: 32px;
      padding-top: 10px;
      p {
        i {
          color: #717171;
          font-size: 12px;
        }
        bdi {
          display: inline-block;
          color: #000;
        }
        &:nth-child(2) span {
          background: #ff9000;
          padding: 2px 3px;
          margin: 0 15px;
        }
        &:nth-child(3) span {
          padding: 2px 3px;
          margin: 0 15px;
          color: #0066ff;
          cursor: pointer;
        }
      }
      .goodsCode {
        display: flex;
        flex-direction: row;

        bdi {
          width: 580px;
          word-wrap: break-word;
          // overflow: hidden;
          // white-space: nowrap;
          // text-overflow: ellipsis;
        }
      }
    }
    .Counter {
      margin-top: 24px;
      color: #777777;
    }
    .buttonz {
      margin-top: 20px;
    }
    .payPaymentMethod {
      display: flex;
      flex-direction: row;
      line-height: 100px;
      ul {
        display: flex;
        flex-direction: row;
        font-size: 12px;
        li {
          display: flex;
          flex-direction: row;
          align-items: center;
          margin: 0 20px;
          // &:hover {
          //   color: #0a83e7;
          //   cursor: pointer;
          // }
          img {
            width: 20px;
            height: 20px;
            border-radius: 5px;
            padding-right: 5px;
          }
        }
      }
    }
    div {
      p {
        i {
          text-align: justify;
          text-justify: inter-ideograph;
        }
      }
    }
  }
  .overviewRight {
    width: 244px;
    h3 {
      background-color: #f3f3f3;
      border-top: 1px solid #d6d6d6;
      border-left: 1px solid #d6d6d6;
      border-right: 1px solid #d6d6d6;
      line-height: 34px;
      font-size: 14px;
      color: #404040;
      padding-left: 19px;
      span {
        border-left: 3px solid #a2a2a2;
        padding-left: 15px;
      }
    }
    div {
      border: 1px solid #d6d6d6;
      img {
        display: block;
        width: 149px;
        height: 89px;
        margin: auto;
      }
      p {
        max-width: 410px;
        padding: 12px 12px;
        line-height: 20px;
        color: #404040;
        font-size: 12px;
        text-indent: 24px;
        text-align: justify;
        text-justify: inter-ideograph;
      }
    }
  }
}
</style>


